<template>
  <div class="echarts" id="pictorialBar" ref="pictorialBar"></div>
</template>

<script>
export default {
  data () {
    return {};
  },
  components: {},
  mounted () {
    this.echartsInit();
  },
  beforeDestroy () { },
  methods: {
    echartsInit () {
      var person_full = "image://" + require('../../assets/img/ng-people.png');
      var person = "image://" + require('../../assets/img/ng-able.png');
      var option = {
        grid: {
          left: "13%",
          right: "10%",
          top: "5%",
          bottom: "25%",
          width: "80%"
        },
        tooltip: {
          trigger: "item",
           backgroundColor:'rgba(0,0,0,0.7)',
          borderColor:'rgba(0,0,0,0.8)',
          borderWidth:0,
          textStyle:{
            fontSize: 10,
            color:"#fff"
          },
          formatter: "{b0}:{c0}"
        },
        xAxis: {
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [{
          type: "category",
          inverse: true,
          data: [
            '合肥市',
            '淮南市',
            '马鞍山市',
            '芜湖市',
            '黄山市'
          ],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 10
            }
          }
        },
        {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: 10
            },
          },
          data: ["12", "9","8","6","5"]
        }

        ],
        series: [{
          type: "pictorialBar",
          barWidth: 100,
          symbol: person_full,
          symbolRepeat: "fixed",
          symbolMargin: 0,
          symbolClip: true,
          symbolSize: 15,
          data: [
            12, 9,8,6,5

          ],
          z: 2
        },
        {
          type: "pictorialBar",
          barWidth: 100,
          itemStyle: {
            normal: {
              opacity: 0.3
            }
          },
          label: {
            normal: {
              show: false
            }
          },
          animationDuration: 0,
          symbolRepeat: "fixed",
          symbolMargin: 0,
          symbol: person,
          symbolSize: 10,
          data: [
            12,12,12,12,12
          ],
          z: 1
        }
        ]
      };
      this.$echarts.init(this.$refs.pictorialBar).setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
